<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        .wrap {
            padding: 10px;
        }

        .buttons {
            margin-bottom: 10px;
        }

        .slide {
            width: 1100px;
            height: 600px;
            border: 1px solid #333;
            position: relative;
            border-top: 0;
            margin-bottom: 10px;
        }

        .ball {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #6ff;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="buttons">
            <button class="start">开始</button>
            <button class="stop">stop(false,false)</button>
            <button class="stop">stop(false,true)</button>
            <button class="stop">stop(true,true)</button>
            <button class="stop">stop(true,false)</button>
            <button class="finish">finish</button>
        </div>
        <div class="slide">
            <div class="ball"></div>
        </div>
    </div>
</body>

<script>

    // 链式操作  =>  jquery的链式调用
    $(".start").click(function () {
        // console.log($(".ball").animate({ left: 1000, top: 500 }, 2000, function () {
        //     console.log("本次运动结束1");
        // }))

        // 运动队列: [{ left: 1000 },{ top: 500 },{ left: 0 },{ top: 0 }]
        $(".ball").animate({ left: 1000 }, 2000, function () {
            console.log("本次运动结束1");
        }).animate({ top: 500 }, 2000, function () {
            console.log("本次运动结束2");
        }).animate({ left: 0 }, 2000, function () {
            console.log("本次运动结束3");
        }).animate({ top: 50 }, 2000, function () {
            console.log("本次运动结束4");
        })
    })


    // stop(clearQueue,jumpToEnd)

    // clearQueue  是否清空队列 (队列中等待执行的动画如何处理)
    // false (默认) 不清空队列 (当前动画停止,进行下一个动画)
    // true        清空队列   (当前动画停止,后续的也不在执行)

    // jumpToEnd  当前正在执行的动画(需要停止的)是否立即完整
    // false    不立即完成 (停留在当前位置)
    // true     立即完成 (立即到达本次运动的终点)

    // 注意:只有本次动画到达终点,才会执行回调函数 => 中途切换到下一个动画/停留在中途 无法执行回调函数

    // finish()  停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。

    $(".stop").eq(0).click(function () {

        // false  不清空队列(当前动画停止,进行下一个动画)
        // false  不立即完成(需要停止的动画停留在当前位置) 
        // => 从当前位置 进入下一个动画  (半途而废)
        $(".ball").stop(false, false);
        // $(".ball").stop();
    })
    $(".stop").eq(1).click(function () {

        // false  不清空队列(当前动画停止,进行下一个动画)
        // true  立即完成(立即到达本次运动的终点) 
        // => 从当前位置 进入下一个动画  
        $(".ball").stop(false, true);
    })
    $(".stop").eq(2).click(function () {

        // true  清空队列(当前动画停止,后续的也不在执行)
        // true  立即完成(立即到达本次运动的终点) 
        // => 停留在本次运动的终点  
        $(".ball").stop(true, true);
    })

    $(".stop").eq(3).click(function () {

        // true   清空队列(当前动画停止,后续的也不在执行)
        // false  不立即完成(需要停止的动画停留在当前位置) 
        // => 停留在当前位置  (暂停)
        $(".ball").stop(true, false);
    })

    $(".finish").click(function () {
        $(".ball").finish();
    })





</script>

</html>